import { size, IFormProps, pageSize, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
import ItemCategoryEdit from "../../components/malls/ItemCategoryEdit";

export interface IItemCategoriesPros extends IFormProps {
    item: any
}
class ItemCategories extends React.PureComponent<IItemCategoriesPros, any>{
    constructor(props) {
        super(props);
    }

    state = {
        storeId: 0,
        itemCategoryId: undefined,
        visible: false,
    }

    componentDidMount() {
        this.getStores();
    }

    search = () => {
        this.getItemCategories();
        this.getSubItemCategories();
    }

    getItemCategories = (payload?) => {
        payload = Object.assign({}, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: "item/getItemCategories",
            payload
        });
    }

    getSubItemCategories = (payload?) => {
        payload = Object.assign({}, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: "item/getSubItemCategories",
            payload
        });
    }

    getStores = () => {
        this.props.dispatch({
            type: "item/getStores",
            payload: {
                callback: () => {
                    this.search();
                }
            }
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    add = () => {
        const { itemCategoryId } = this.state;
        this.edit({ itemCategoryId });
    }

    edit = (itemCategory = {}) => {
        this.props.dispatch({
            type: "item/save",
            payload: { itemCategory }
        });
        this.setVisible(true);
    }

    setVisible = (visible = false) => {
        this.setState({ visible });
    }

    save = (form) => {
        form['storeId'] = this.state.storeId==0? this.props.item.storeId : this.state.storeId;
        let { itemCategory } = this.props.item;
        form = Object.assign({}, itemCategory, form);
        this.props.dispatch({
            type: "item/saveItemCategory",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                    this.search();
                }
            }
        });
    }

    remove = (id) => {
        this.props.dispatch({
            type: "item/removeItemCategory",
            payload: {
                form: { ids: [id] },
                callback: () => {
                    this.getItemCategories();
                    this.getSubItemCategories();
                }
            }
        })
    }

    moveUp = (id) => {
        this.props.dispatch({
            type: "item/moveUpItemCategory",
            payload: {
                form: { id },
                callback: () => {
                    this.getItemCategories();
                    this.getSubItemCategories();
                }
            }
        })
    }

    moveDown = (id) => {
        this.props.dispatch({
            type: "item/moveDownItemCategory",
            payload: {
                form: { id },
                callback: () => {
                    this.getItemCategories();
                    this.getSubItemCategories();
                }
            }
        })
    }

    storeChange = (storeId) => {
        this.setState({ storeId });
        this.getItemCategories({ storeId });
        this.getSubItemCategories({ storeId });
    }

    categoryChange = (itemCategoryId) => {
        this.setState({ itemCategoryId });
        this.getSubItemCategories({ itemCategoryId });
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const {storeId, itemCategory, itemCategories: { items }, subItemCategories: { items: subItems }, stores: { items: stores } } = this.props.item;
        const {businessScope,businessScopes:{items:bitems}}=this.props.item;
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Form layout="inline">
                            <Form.Item label='请选择店铺'>
                                {getFieldDecorator('storeId', {
                                    initialValue: storeId,
                                })(
                                    <Select style={{ width: 120 }} onChange={this.storeChange}>
                                        {
                                            stores.map((store: api.SingleUserMallStoresVOStoreVO) => {
                                                return <Select.Option value={store.id}>{store.name}</Select.Option>
                                            })
                                            
                                        }
                                    </Select>)}
                            </Form.Item>
                            <Form.Item label='请选择上级分类'>
                                {getFieldDecorator('itemCategoryId', {
                                    initialValue: '',
                                })(
                                    <Select style={{ width: 150 }} onChange={this.categoryChange}>
                                        <Select.Option value=''>全部</Select.Option>
                                        {
                                            items.map((item: api.SingleUserMallItemsVOItemCategoryVO) => {
                                                return <Select.Option value={item.id}>{item.name}</Select.Option>
                                            })
                                        }
                                    </Select>)}
                            </Form.Item>
                            {/* <Form.Item>
                                        <Button size={size} onClick={() => this.edit()}>新增</Button>
                                    </Form.Item>
                                    <Form.Item>
                                        <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                                    </Form.Item> */}
                            {
                                storeId ? (
                                    <Form.Item>
                                        <Button size={size} onClick={() => this.edit()}>新增</Button>
                                    </Form.Item>
                                ) : (null)
                            }
                            {
                                storeId ? (
                                    <Form.Item>
                                        <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                                    </Form.Item>
                                ) : (null)
                            }
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>商品分类列表</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={subItems}
                                bordered
                                pagination={false}
                                rowKey={(record: api.SingleUserMallItemsVOItemCategoryVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return index + 1
                                }} />
                                <Table.Column title="名称" key="name" dataIndex="name" />
                                <Table.Column title="图片" key="picture" render={(text, record: api.SingleUserMallItemsVOItemCategoryVO, index) => {
                                    return <img width='100px' src={record.picture} />
                                }} />
                                <Table.Column title="状态" key="creationTime" render={(text, record: api.SingleUserMallItemsVOItemCategoryVO, index) => {
                                    return record.enabled ? '启用' : '禁用'
                                }} />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallItemsVOItemCategoryVO, index) => {
                                    return (
                                        <div>
                                            <a className={Styles.M_RIGHT} onClick={() => this.edit(record)}>
                                                编辑
                                            </a>
                                            {index > 0 ? (
                                                <a className={Styles.M_RIGHT} onClick={() => this.moveUp(record.id)}>
                                                    上移
                                                </a>) : null}
                                            {index < items.length - 1 ? (
                                                <a className={Styles.M_RIGHT} onClick={() => this.moveDown(record.id)}>
                                                    下移
                                                </a>) : null}
                                            <Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                                <a>删除</a>
                                            </Popconfirm>
                                        </div>
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
                {
                    this.state.visible ? (<ItemCategoryEdit visible={this.state.visible}
                        itemCategories={items}
                        itemCategory={itemCategory}
                        businessScope={businessScope}
                        businessScopes={bitems}
                        onSave={this.save}
                        onCancel={this.setVisible} />)
                        : (undefined)
                }

            </Row>)
    }
}

export default connect(({ item, loading: { models: { item: loading } } }) => ({ item, loading }))(Form.create()(ItemCategories));
